<template>
  <div class="cart-list-item">
    <check-button
      :checkedInfo="{ checked: itemInfo.checked, iid: itemInfo.iid }"
    />
    <div class="item-img">
      <img :src="itemInfo.image" alt="" />
    </div>
    <div class="item-content" @click="itemClick(itemInfo.iid)">
      <div class="title">{{ itemInfo.title }}</div>
      <div class="desc">{{ itemInfo.desc }}</div>
      <div class="price-info">
        <span class="price">￥{{ itemInfo.price }}</span>
        <div class="count">×{{ itemInfo.count }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import CheckButton from "@/views/cart/childComps/CheckButton";
export default {
  name: "CartListItem",
  props: ["itemInfo"],
  components: {
    CheckButton,
  },
  methods: {
    itemClick(iid) {
      this.$router.push("/detail/" + iid);
    },
  },
};
</script>

<style scoped>
.cart-list-item {
  display: flex;
  height: 90px;
  border-top: 1px solid #dddbdb;
  border-bottom: 1px solid #dddbdb;
  padding: 5px 0;
}
.item-img {
  height: 100%;
  width: 70px;
  text-align: center;
  overflow: hidden;
}
.item-img img {
  height: 100%;
  border-radius: 4px;
}
.item-content {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  overflow: hidden;
}
.item-content .title {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  align-items: center;
}
.item-content .desc {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #6b6b6b;
  align-items: center;
}
.item-content .price-info {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item-content .price-info .price {
  font-size: 14px;
  color: var(--color-high-text);
  font-weight: 700;
}
.item-content .price-info .count {
  font-size: 13px;
}
</style>
